<template>
  <el-row class="bigTitleCon" style="background: #262544;padding:1em 1em;">
  		<el-col :xs="24" :sm="24" :md="24" :lg="24" style="text-align: left;">
  			<b style="color: white;margin-left: 1em;">时间：</b>
  			<el-radio-group @change="changeDay" text-color="white" v-model="dayDefault" style="border: 1px solid #1776fd;margin:0 5px;border-radius: 6px;">
  				<el-radio-button label="0">本周数据</el-radio-button>
  				<el-radio-button label="1">最近七天</el-radio-button>
  				<el-radio-button label="2">近三十天</el-radio-button>
  			</el-radio-group>
        <div class="dateScope dateScopeCell" style="display:inline">
  			  <el-date-picker @change="onTime" type="daterange" align="right" unlink-panels start-placeholder="开始日期" end-placeholder="结束日期" style="padding-left:10px" v-model="time" ></el-date-picker>
  			</div>
        <el-checkbox @change="selContrast" style="color: white;margin-left: 1em;">对比时间段</el-checkbox>
  			<div class="dateScope dateScopeCell" style="display:inline">
          <el-date-picker @change="changeCompareDate" v-model ="timeCompare" v-if="contrast" type="daterange" align="right" unlink-panels start-placeholder="对比开始日期" end-placeholder="对比结束日期" style="padding-left:10px">
  			  </el-date-picker>
        </div>
  		</el-col>
  	</el-row>
</template>
<script>
export default {
  data() {
    return {
      contrast: false,
      dayDefault: "0",
      time: [],
      timeScope: 0,
      timeCompare: [],
      timeObj: {
        time: [] // 选择时间
        // compareTime:[]// 对比时间,
      }
    };
  },
  mounted() {
    this.changeDay("0");
  },
  methods: {
    getTimeScope(res) {
      var days = res[1].getTime() - res[0].getTime();
      return parseInt(days / 1000 / 60 / 60 / 24);
    },
    changeCompareDate(res) {
      var time = [];
      var daysNum = this.getTimeScope(res);
      if (daysNum !== this.timeScope) {
        if (this.timeScope === 1) {
          this.$message({
            message: "对比时间段只能为" + this.timeScope + "天",
            type: "error"
          });
        } else {
          this.$message({
            message: "对比时间段只能为" + (this.timeScope + 1) + "天",
            type: "error"
          });
        }
        this.timeCompare = [];
        return;
      }
      time[0] = this.$utils.parseTime(res[0], "{y}-{m}-{d}");
      time[1] = this.$utils.parseTime(res[1], "{y}-{m}-{d}");
      this.timeObj.compareTime = [];
      this.timeObj.compareTime = time;
      this.$emit("onChangeTime", this.timeObj);
    },
    selContrast(res) {
      // 两日期中的时间差
      var timeDays = Number(this.getTimeScope(this.time));
      var compareTime = [];
      // 指 定时间向后推多少天
      compareTime[0] = this.$utils.getDateStr(-timeDays - 1, this.time[0]);
      compareTime[1] = this.$utils.getDateStr(-timeDays - 1, this.time[1]);
      var timeCompare = [new Date(compareTime[0]), new Date(compareTime[1])];
      this.$set(this, "timeCompare", timeCompare); // 给对比时间赋值
      this.contrast = res;
      this.timeObj.compareTime = compareTime;
      if (!res && this.timeObj.compareTime) {
        delete this.timeObj.compareTime;
      }
      // 计算对比时间段
      this.$emit("onChangeTime", this.timeObj);
    },
    onTime(res) {
      this.timeObj.time[1] = this.$utils.parseTime(res[1], "{y}-{m}-{d}");
      this.timeObj.time[0] = this.$utils.parseTime(res[0], "{y}-{m}-{d}");
      this.timeScope = this.getTimeScope(res);
      this.$set(this, "dayDefault", "4");
      this.$emit("onChangeTime", this.timeObj);
    },
    changeDay(res) {
      if (res === "0") {
        // 本周
        var now = new Date();
        var nowDays = now.getDay() - 1; // 本周的第几天
        var sundays
        if (nowDays === 0) {
          sundays = 6; // 如果今天是周日
        }
        sundays = 6 - nowDays; // 周日距离今天的天数（负数表示）
        this.timeObj.time[0] = this.$utils.getDateStr(-nowDays);
        this.timeObj.time[1] = this.$utils.getDateStr(sundays);
      } else if (res === "1") {
        // 最近七天
        this.timeObj.time[1] = this.$utils.getDateStr(0);
        this.timeObj.time[0] = this.$utils.getDateStr(-6);
      } else {
        // 近三十天
        this.timeObj.time[1] = this.$utils.getDateStr(0);
        this.timeObj.time[0] = this.$utils.getDateStr(-29);
      }
      var time = [];
      time[0] = this.$utils.formateDate(this.timeObj.time[0]);
      time[1] = this.$utils.formateDate(this.timeObj.time[1]);

      this.timeScope = this.getTimeScope(time);
      this.timeCompare = [];
      this.$set(this, "time", time);
      this.$emit("onChangeTime", this.timeObj);
    }
  }
};
</script>
<style>
@import "../../styles/element-ui/date/dateScope.css";
/* 时间选择 */
.dateScopeCell .el-date-editor .el-range__icon{
  margin-left:15px;
  color: #31cee6
}
.dateScopeCell .el-date-editor .el-range-input{
  color: #31cee6
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #31cee6;
}
.el-select-dropdown {
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: none;
}
.el-select-dropdown__list {
  background-color: none;
  background: none;
}
.el-popper .popper__arrow,
.el-popper .popper__arrow::after {
  border-style: none;
}
.el-select-dropdown__item.selected {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
}
.el-select-dropdown__item.selected.hover {
  background-color: #31cee6;
  color: black;
}
.el-input.is-disabled .el-input__inner {
  background: none;
}
</style>

